<template>
 <div class="error-box">
    <img :src="img" alt="404" />
    <div class="error-box-msg">
      啊哦，你访问的页面被删除或不存在...<router-link class="error-box-link" to="/">[返回首页]</router-link>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const img = ref('')
    img.value = require('@/assets/images/404.png')
    return {img}
  }
})
</script>

<style lang="scss" scoped>
.error-box {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 600px;
  height: 420px;
  text-align: center;
  .error-box-msg {
    margin-top: 20px;
    font-size: 24px;
    color: #b0b0b0;
  }
  .error-box-link {
    color: #31c9cd;
  }
}
</style>